<template>
    <div id="main">
        <!-- 顶部logo  title -->
        <div id="head">
            <div class="left">
                <div class="left-top-title">欢迎使用稳健医疗产品</div>
                <div class="left-buttom-time">{{ stytemTime }}</div>
            </div>
            <img class="right" title="稳健医疗用品股份有限公司" src="../assets/image/logo@3x.png" />
        </div>
        <!-- 中间分类区域 -->
        <div id="content">
            <div
                class="content-item"
                v-for="(item, index) in cates"
                :key="item.id"
                :style="{ background: bcClass[index] }"
                @click="toCate(item)"
            >
                <div class="top-text">
                    <span class="name">{{ item.name }}</span>
                    <span class="descs">{{ item.descs }}</span>
                </div>
                <div class="bottom-img"><img class="pic" :src="item.pic" /> <img class="icon" :src="item.arrow" /></div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">由Win+Platform提供技术支持</div>
    </div>
</template>

<script>
import moment from 'moment'
import { useRouter } from 'vue-router'
import { defineComponent, computed, ref, reactive, toRefs } from 'vue'
export default defineComponent({
    name: 'Home',
    setup() {
        // 变量
        let data = reactive({
            bcClass: ['#e5fbf6', '#eaefff', '#f8f6ea', '#e4f7ff'],
            cates: [
                {
                    id: 1,
                    path: '/search',
                    name: '真伪鉴别',
                    descs: '方便查询稳健产品',
                    pic: require('@/assets/image/identify@3x.png'),
                    arrow: require('@/assets/image/arrow@3x(1).png')
                },
                {
                    id: 2,
                    path: '/search',
                    name: '流向查询',
                    descs: '实时查询商品流向',
                    pic: require('@/assets/image/flow.png'),
                    arrow: require('@/assets/image/arrow@3x.png')
                },
                {
                    id: 3,
                    path: '/shop',
                    name: '商品入口',
                    descs: '一键直达稳健官方商城',
                    pic: require('@/assets/image/goods.png'),
                    arrow: require('@/assets/image/arrow3x(3).png')
                },
                {
                    id: 4,
                    path: '/contact',
                    name: '联系我们',
                    descs: '合作热线、质量热线',
                    pic: require('@/assets/image/connact.png'),
                    arrow: require('@/assets/image/arrow3x(2).png')
                }
            ]
        })

        // 计算属性
        const stytemTime = computed(() => {
            return moment(new Date()).format('YYYY-MM-DD')
        })
        const router = useRouter()
        // 方法
        function toCate(value) {
            router.push({
                path: value.path,
                query: { searchPath: value.name }
            })
        }
        return {
            ...toRefs(data),
            stytemTime,
            toCate
        }
    }
})
</script>

<style scoped lang="scss">
#main {
    overflow: hidden;
}

#head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    // margin: 10px 6px 10px 6px;
    background-color: white;
    border-radius: 15px;
}
// 顶部左侧标题
.left {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 20px;

    .left-top-title {
        word-break: keep-all;
    }

    .left-buttom-time {
        color: #666;
        word-break: keep-all;
    }
}

// 顶部右侧logo
.right {
    width: 90px;
    height: 35px;
    margin-right: 20px;
}

// 中间分类区域
#content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.content-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(50vw - 29px);
    height: calc((100vh - 200px) / 2);
    min-height: 236px;
    margin-top: 7px;
    border-radius: 10px;

    .bottom-img {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0 12px 30px 20px;

        .pic {
            width: 56px;
            height: 56px;
        }

        .icon {
            width: 20px;
            height: 20px;
            margin-bottom: 2px;
        }
    }

    .top-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        margin: 23px 34px 0 20px;

        .name {
            font-size: 12px;
            color: #999;
        }

        .descs {
            width: 26vw;
            margin-top: 8px;
            font-size: 18px;
            text-align: start;
        }
    }
}

// 底部文字
.bottom {
    display: flex;
    justify-content: center;
    height: 22px;
    margin-top: 20px;
    font-size: 12px;
    color: #999;
}
</style>
